// 配置Tailwind自定义颜色和字体
tailwind.config = {
    theme: {
        extend: {
            colors: {
                primary: '#165DFF',
                secondary: '#36CFC9',
                accent: '#722ED1',
                neutral: '#F5F7FA',
                dark: '#1D2129'
            },
            fontFamily: {
                inter: ['Inter', 'system-ui', 'sans-serif'],
            },
        }
    }
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    // 验证用户登录状态
    const loginEmail = localStorage.getItem('currentLoginEmail');
    if (!loginEmail) {
        window.location.href = 'index.html';
        return;
    }
    
    // 获取用户信息并显示
    const users = JSON.parse(localStorage.getItem('registeredUsers')) || [];
    const currentUser = users.find(user => user.email === loginEmail);
    if (currentUser) {
        document.getElementById('user-display-name').textContent = currentUser.name;
        document.getElementById('header-avatar').src = currentUser.avatar || 'https://picsum.photos/id/64/200/200';
    }
    
    // 初始化积分图表
    initPointsChart();
    
    // 绑定退出登录事件
    document.getElementById('logout-button').addEventListener('click', function() {
        localStorage.removeItem('currentLoginEmail');
        window.location.href = 'index.html';
    });
    
    // 移动端菜单切换
    document.getElementById('mobile-menu-button').addEventListener('click', function() {
        const mobileMenu = document.getElementById('mobile-menu');
        mobileMenu.classList.toggle('hidden');
    });
    
    // 用户菜单切换
    document.getElementById('user-menu-button').addEventListener('click', function() {
        const userMenu = document.getElementById('user-menu-dropdown');
        userMenu.classList.toggle('hidden');
    });
    
    // 点击页面其他区域关闭下拉菜单
    document.addEventListener('click', function(event) {
        const userMenuButton = document.getElementById('user-menu-button');
        const userMenu = document.getElementById('user-menu-dropdown');
        
        if (!userMenuButton.contains(event.target) && !userMenu.contains(event.target)) {
            userMenu.classList.add('hidden');
        }
    });
});

// 初始化积分趋势图
function initPointsChart() {
    // 生成近14天的日期标签
    const labels = [];
    const today = new Date();
    
    for (let i = 13; i >= 0; i--) {
        const date = new Date(today);
        date.setDate(today.getDate() - i);
        labels.push(`${date.getMonth() + 1}/${date.getDate()}`);
    }
    
    // 模拟积分数据
    const pointsData = [1050, 1065, 1070, 1085, 1090, 1105, 1120, 
                      1125, 1130, 1135, 1140, 1145, 1157, 1250];
    
    // 获取图表上下文
    const ctx = document.getElementById('pointsChart').getContext('2d');
    
    // 创建折线图
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: '积分余额',
                data: pointsData,
                borderColor: '#165DFF',
                backgroundColor: 'rgba(22, 93, 255, 0.1)',
                borderWidth: 2,
                pointBackgroundColor: '#165DFF',
                pointRadius: 4,
                pointHoverRadius: 6,
                tension: 0.3,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.7)',
                    padding: 10,
                    titleFont: {
                        size: 14
                    },
                    bodyFont: {
                        size: 13
                    },
                    callbacks: {
                        label: function(context) {
                            return `积分: ${context.raw}`;
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: false,
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)'
                    },
                    ticks: {
                        callback: function(value) {
                            return value;
                        }
                    }
                },
                x: {
                    grid: {
                        display: false
                    }
                }
            },
            interaction: {
                intersect: false,
                mode: 'index'
            }
        }
    });
}
